import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';
import 'package:ty_smart_watch/page/smartlife/controller/today_step_controller.dart';

import '../../common/images_url.dart';

class DashBoard extends StatelessWidget {
  const DashBoard({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      // alignment: Alignment.center,
      // color: Colors.white,
      padding: const EdgeInsets.all(16),
      decoration: const BoxDecoration(
        //圆角半径
        borderRadius: BorderRadius.all(Radius.circular(12.0)),

        //背景图片
        image: DecorationImage(image: AssetImage(SPORT_DASHBOARD_BACKROUND), fit: BoxFit.fill),

        //阴影
        // boxShadow: [
        // BoxShadow(color: Colors.grey, offset: Offset(0, 0), blurRadius: 6, spreadRadius: 0),
        // ],

        // 边框线宽、颜色
        // border: Border.all(width: 1.0, color: Colors.blue),

        // 线性渐变，分别设置渐变的颜色，起始点
        // gradient: LinearGradient(
        //     begin: Alignment.topLeft,
        //     end: Alignment.bottomRight,
        //     colors: [Colors.lightBlueAccent, Colors.white]),
      ),
      child: Row(
        children: [DailyData(), PieChart()],
      ),
    );
  }
}

//日常数据
class DailyData extends StatelessWidget {
  StepController stepController = Get.find();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        //步行数据
        Row(
          children: [
            Obx(
              () => Text(
                stepController.currStep.value,
                style:
                    const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
            const SizedBox(width: 6),
            const Text(
              "步",
              style: TextStyle(color: Colors.black, fontSize: 12),
            )
          ],
        ),
        //步行图标
        Row(
          children: [
            Image.asset(SPORT_DASHBOARD_ICON_STEP, width: 16, height: 16),
            const SizedBox(width: 4),
            const Text(
              "当前步数",
              style: TextStyle(color: Colors.grey, fontSize: 12),
            )
          ],
        ),
        //间隔
        const SizedBox(height: 10),
        //热量数据
        Row(
          children: [
            Obx(
              () => Text(
                stepController.cal.value,
                style:
                    const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
            const SizedBox(width: 6),
            const Text(
              "Kcal",
              style: TextStyle(color: Colors.black, fontSize: 12),
            )
          ],
        ),
        Row(
          children: [
            Image.asset(SPORT_DASHBOARD_ICON_CAL, width: 16, height: 16),
            const SizedBox(width: 4),
            const Text("当前热量", style: TextStyle(color: Colors.grey, fontSize: 12))
          ],
        )
      ],
    );
  }
}

//步数饼状图
class PieChart extends StatelessWidget {
  StepController stepController = Get.find();

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Container(
        // color: Colors.cyan,
        margin: const EdgeInsets.only(left: 30),
        child: Center(
          child: Obx(
            () => CircularPercentIndicator(
              radius: 60.0,
              lineWidth: 10.0,
              animation: true,
              percent: (stepController.targetStep.value != "0")
                  ? (double.parse(stepController.currStep.value) /
                      double.parse(stepController.targetStep.value))
                  : 0.0,
              center: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  //今日步数 文字
                  const Text("今日步数", style: TextStyle(color: Colors.grey, fontSize: 10)),
                  //今日步数
                  Text(
                    stepController.currStep.value,
                    style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 24.0),
                  ),

                  //目标步数
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(SPORT_DASHBOARD_ICON_STEP_TARGET, width: 20, height: 20),
                      Text(stepController.targetStep.value,
                          style: const TextStyle(color: Colors.grey, fontSize: 10))
                    ],
                  )
                ],
              ),
              circularStrokeCap: CircularStrokeCap.round,
              backgroundColor: const Color(0xFFF0F0F0),
              progressColor: const Color(0xFF308DFC),
            ),
          ),
        ),
      ),
    );
  }
}
